<template>
  <div class="ts-info-component">
    <div class="profile-form">
      <ts-group>
        <ts-cell theme="list" :mode="mode" type="text" title="姓名" v-model="info.name" tip="请填写真实姓名">
        </ts-cell>
        <ts-cell theme="list" readonly="readonly" title="性别" :options="options"
                 tip="请选择" isLink :mode="mode" id="gender" :value="gender"
                 @click.native="isGenderVisible()"></ts-cell>
        <ts-cell theme="list" type="text" readonly="readonly" @click.native="openPicker()" v-model="info.birthday"
                 :mode="mode" title="出生日期"
                 tip="请选择" isLink id="birth"></ts-cell>
        <ts-cell theme="list" type="text" v-model="info.native_place" title="工作城市" @click.native="isAddrVisible"
                 id="native"
                 readonly="readonly" :mode="mode" isLink tip="请选择"></ts-cell>
        <ts-cell theme="list" :mode="mode" readonly="readonly" type="text" v-model="info.company_name" title="所属公司"
                 tip="请填写" isLink @click.native="isCompVisible" id="company"></ts-cell>
        <ts-cell theme="list" readonly="readonly" title="从属类型" :options="options1"
                 tip="请选择" isLink :mode="mode" id="type" :value="gendertype"
                 @click.native="isGenderVisible1()"></ts-cell>

      </ts-group>
      <ts-group class="contact-cells">
        <ts-cell theme="list" :mode="mode" title="紧急联系人姓名" v-model="info.other_name" tip="请填写"></ts-cell>
        <ts-cell theme="list" type="tel" :mode="mode" title="紧急联系人电话" v-model="info.other_tel"
                 tip="请填写"></ts-cell>
      </ts-group>
    </div>
    <gender-picker @complete="setGender" v-model="genderVisible" :options="options"></gender-picker>
    <gender-picker @complete="setGender1" v-model="genderVisible1" :options="options1"></gender-picker>
    <addr-picker @complete="setAddr" v-model="addrVisible"></addr-picker>
    <ts-time-picker @confirm="timerChange" v-model="info.birthday" ref="pickerDate"></ts-time-picker>
    <comp-picker @complete="setComp" v-model="compVisible"></comp-picker>
  </div>
</template>
<script>
  export default {
    components: {
      //异步加载,减轻页面卡顿
      addrPicker(resolve) {
        require(['./AddrPicker.vue'], resolve)
      },
      compPicker(resolve) {
        require(['./CompPicker.vue'], resolve)
      }
    },
    name: 'EditProfile',
    props: {
      value: Object,
      mode: String
    },
    data() {
      return {
        info: this.value,
        options: [{text: '男', value: 1}, {text: '女', value: 2}],
        options1: [{text: '员工', value: 1}, {text: '挂靠', value: 2}],
        addrVisible: false,
        compVisible: false,
        genderVisible: false,
        genderVisible1: false,
        gender: '',
        gendertype: '',
        test: false
      }
    },
    mounted() {
      if (this.info.sex === 1) this.gender = '男';
      else if (this.info.sex === 2) this.gender = '女'
      if (this.info.of_type === 1) this.gendertype = '员工';
      else if (this.info.of_type === 2) this.gendertype = '挂靠'
    },
    methods: {
      isAddrVisible() {
        return this.addrVisible = this.mode === 'edit'
      },
      isCompVisible() {
        return this.compVisible = this.mode === 'edit';
      },
      isGenderVisible() {
        return this.genderVisible = this.mode === 'edit';
      },
      isGenderVisible1() {
        return this.genderVisible1 = this.mode === 'edit';
      },
      setAddr(val, ids) {
        this.info.province = ids[0];
        this.info.city = ids[1];
        this.info.county = ids[2];
        this.info.native_place = val;
        this.setAlign('native');
      },
      openPicker() {
        if (this.mode === 'edit')
          this.$refs['pickerDate'].open();
      },
      timerChange(val) {
        this.info.birthday = val;
        this.setAlign('birth');
      },
      setComp(name, id, pinyin) {
        this.info.company_name = name;
        this.info.company_id = id;
        this.info.member_number = pinyin;
        this.setAlign('company');
      },
      setGender(val) {
        this.gender = val.text;
        this.info.sex = val.value;
        this.setAlign('gender');
      },
      setGender1(val) {
        this.gendertype = val.text;
        this.info.of_type = val.value;
        this.setAlign('type');
      },
      setAlign(id) {
        document.getElementById(id).style.textAlign = 'left';
      }
    },
    watch: {
      'info.sex': {
        handler(val) {
          if (val === null || val === -1) this.gender = '';
          if (val === 1) this.gender = '男';
          if (val === 2) this.gender = '女';
        },
        deep: true
      },
      'info.of_type': {
        handler(val) {
          if (val === null || val === -1) this.gendertype = '';
          if (val === 1) this.gendertype = '员工';
          if (val === 2) this.gendertype = '挂靠';
        },
        deep: true
      }
    },
    deactivated() {
      this.genderVisible = false;
      this.genderVisible1 = false;
      this.addrVisible = false;
      this.compVisible = false;
      this.compVisible = false;
      this.$refs['pickerDate'].close();
    }
  }
</script>
<style lang="scss">
  .ts-info-component {
    .profile-form {
      .contact-cells {
        margin-top: .20rem;
        .ts-cell {
          .ts-cell-title {
            min-width: 2.10rem;
          }
          .ts-cell-value {
            margin-left: .30rem;
          }
        }
      }
    }
  }
</style>
